// 导入
require('../css/commCss/normalize.css')
require('../css/commCss/reset.css')
require('../css/commCss/property.css')
require('../css/commCss/basic.less')
require('../font/iconfont.css')
require('../css/me-data.less')
// 导入axios
const axios = require('axios')

// 导入echarts
const echarts = require('echarts')

document.addEventListener('DOMContentLoaded', function () {
    const backBtn = document.querySelector('#backBtn')

    // 点击返回上一个页面
    backBtn.addEventListener('click', function () {
        history.go(-1)
    })

    // 获取元素
    const userImg = document.querySelector('#userImg')
    const motionTime = document.querySelector('#motionTime')
    const calorie = document.querySelectorAll('.calorie')
    const punchin = document.querySelectorAll('.punchin')
    // console.log(calorie);
    // 发送请求获取头像
    axios.get('http://139.9.177.51:8099/users/accountinfo?userId=' + localStorage.userId).then(function (res) {
        // console.log(res.data.data.imgurl);
        userImg.src = res.data.data.imgurl
    })
    axios.get('http://139.9.177.51:8099/users/mysportsBadge', {
        params: {
            "userId": localStorage.userId
        }
    }).then(function (res) {
        let data = res.data.data.sports
        // console.log(data);
        motionTime.textContent = data.times
        calorie.forEach(function (value) {
            value.textContent = data.calorie
        })
        punchin.forEach(function (value) {
            value.textContent = data.punchin
        })
    })
    let xmain1 = ['2-11', '2-12', '2-13', '2-14', '2-15', '2-16', '2-17']
    let ymain1 = [5, 20, 36, 10, 10, 20, 20, 28]


    drawWeekData(xmain1, ymain1)

    function drawWeekData(x, y) {
        // 初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main1'));
        // 指定图表的配置项和数据
        let option = {
            title: {
                text: '近七天运动时长',
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: {},
            legend: {},
            xAxis: {
                data: x
            },
            yAxis: {},
            series: [{
                type: 'bar',
                data: y
            }],
            color: ['#83A7D1']
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }


    drawPie()

    function drawPie() {
        // 初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main2'));
        // 指定图表的配置项和数据
        option = {
            title: {
                text: '运动分类',
                left: 'left',
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle',
                icon: 'rect',
                itemWidth: 10,
                itemHeight: 10,
            },
            series: [{
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [{
                        value: 150,
                        name: '跑步',
                        itemStyle: {
                            color: '#f60'
                        }
                    },
                    {
                        value: 100,
                        name: '骑行',
                        itemStyle: {
                            color: '#736171'
                        }
                    },
                    {
                        value: 250,
                        name: '训练',
                        itemStyle: {
                            color: '#58BB92'
                        }
                    }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    formatter: '{d}%',
                    position: 'inside',
                    color: '#fff'
                }
            }]
        };
        myChart.setOption(option)
    }

    drawStack()

    function drawStack() {
        // 初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main3'));
        // 指定图表的配置项和数据
        option = {
            title: {
                text: '近七日运动分类',
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {
                left: 'right',
                right: 10,
                top: 'middle',
                orient: 'vertical',
                icon: 'rect',
                itemWidth: 10,
                itemHeight: 10
            },
            grid: {
                left: '3%',
                right: '25%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['2-11', '2-12', '2-13', '2-14', '2-15', '2-16', '2-17']
            },
            series: [{
                    name: '跑步',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 302, 301, 334, 390, 330, 320],
                    itemStyle: {
                        color: '#4294FF'
                    }
                },
                {
                    name: '骑行',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210],
                    itemStyle: {
                        color: 'skyblue'
                    }
                },
                {
                    name: '训练',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310],
                    itemStyle: {
                        color: 'green'
                    }
                },

            ]
        };
        myChart.setOption(option)
    }

    drawBroken()

    function drawBroken() {
        // 初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main4'));
        // 指定图表的配置项和数据
        option = {
            title: {
                text: '近七日训练次数',
                textStyle: {
                    fontSize: 14
                }
            },
            xAxis: {
                type: 'category',
                data: ['2-11', '2-12', '2-13', '2-14', '2-15', '2-16', '2-17']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line',
                symbol: "none",
                itemStyle: {
                    color: '#58BB92'
                }
            }]
        };
        myChart.setOption(option)
    }
})